<template>
  <div>
    <el-row :gutter="26">
      <!-- <el-col :span="8">
        <span class="iconfont icon-zhuti zhuti-svg" @click="changeColor"></span>
      </el-col> -->
      <el-col :span="10">
        <span class="iconfont icon-refresh refresh-svg" @click="refresh"></span>
      </el-col>
      <el-col :span="8">
        <span
          @click="click"
          class="iconfont screenfull-svg"
          :class="isFullscreen?'icon-quxiaoquanping':'icon-quanping'"
        ></span>
      </el-col>
    </el-row>
    <!-- :icon-class="isFullscreen?'exit-fullscreen':'fullscreen'"  -->
  </div>
</template>

<script>
import screenfull from "screenfull";

export default {
  name: "Screenfull",
  data() {
    return {
      flag:true,
      isFullscreen: false,
    };
  },
  mounted() {
    this.init();
  },
  beforeDestroy() {
    this.destroy();
  },
  methods: {
    changeColor(){
      this.$emit("changeColor");
    },
    refresh(){
      this.$router.go(0);
    },
    click() {
      // if (!screenfull.enabled) {
      //   this.$message({
      //     message: "you browser can not work",
      //     type: "warning",
      //   });
      //   return false;
      // }
      screenfull.toggle();
      this.isFullscreen = !this.isFullscreen;
    },
    change() {
      this.isFullscreen = screenfull.isFullscreen;
    },
    init() {
      if (screenfull.enabled) {
        screenfull.on("change", this.change);
      }
    },
    destroy() {
      if (screenfull.enabled) {
        screenfull.off("change", this.change);
      }
    },
  },
};
</script>

<style scoped>
.screenfull-svg {
  display: inline-block;
  cursor: pointer;
  fill: #5a5e66;
  width: 100px;
  height: 50px;
  font-size: 40px;
  vertical-align: 10px;
}
.refresh-svg {
  width: 200px;
  height: 100px;
  font-size: 42px;
  cursor: pointer;
}
.zhuti-svg{
  width: 200px;
  height: 100px;
  font-size: 42px;
  cursor: pointer;
}
</style>
